<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示三种display类型</title>
		<style>
			.div_1{
				height: 200px; width: 200px; 
				line-height: 50px;
				border: #006400 solid 1px;
				margin: 5px;
				padding: 5px;
			}
			.div_1 div{
				border: #8B0000 solid 1px;
			}
			span {
				height: 300px;
				width: 200px;
				margin: 50px;
				padding: 50px;
				line-height: 50px;
				
			}
			img, input {
				  font-size: 50px;
				border: #8B0000 solid 1px;
			}
		</style>
	</head>
	<body>
		这里是第一行
		这里是不是第二行？
		<!--块级元素 display:block;-->
		<div class="div_1">
			这里到底是不是你的小可爱<br/>
			NO!!!!!!!
			<div>上看下看左看右看！</div>
			YES！！！！！！
			
		</div>
		是的发送到发送到
		
		<!--行内(内联)元素 display:inline;-->
		
		<span>冷灯看剑</span>
		<span>剑上几番功名</span>
		
		<br />
		<!--行内(内联)块级元素 display:inline-block; -->
		
		<img src="../20190305/imgs/2.png" />
		<input type="text" value="你到底吃不吃这只鸟" />
	</body>
</html>
